<template>
<div id="barChart"></div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'BarChart',
    mounted () {
        this.init()
    },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData',
            univariateData: 'common/getUnivariateData'
        })
    },
    watch: {
        univariateData () {
            this.init()
        }
    },
    methods: {
        init () {
            let label = this.analysisReportData['label']
            let list = label ? this.univariateData['直方图'].vector[0]['1']['直方图'] : this.univariateData['直方图'][0]['1']['直方图']
            let series = []
            let names = []
            let types = []
            if (label) {
                for (let n = 0; n < list.length; n++) {
                    types.push(list[n].x)
                }
                names = JSON.parse(JSON.stringify(this.univariateData['类别分布']))
                for (let i = 0; i < names.length; i++) {
                    let arr = []
                    for (let n = 0; n < list.length; n++) {
                        arr.push(list[n].y[i])
                    }
                    series.push({
                        barMaxWidth: 30,
                        showSymbol: false,
                        name: names[i],
                        type: 'bar',
                        stack: 'bar',
                        // barGap: 0,
                        data: arr
                    })
                }
            } else {
                let data = []
                for (let i = 0; i < list.length; i++) {
                    types.push(list[i].x)
                    data.push(list[i].y)
                }
                series = [{
                    type: 'bar',
                    barMaxWidth: 30,
                    showSymbol: false,
                    data
                }]
            }
            names.length = 5
            let option = {
                dataZoom: [
                    {
                        type: 'inside',
                        yAxisIndex: [0]
                    }
                ],
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    y: '20px',
                    data: names
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: types
                },
                series
            }
            let myChart = this.$echarts.init(document.getElementById('barChart'), 'walden')
            myChart.setOption(option, true)
        }
    }
}
</script>
<style lang="less">
    #barChart {
        width: 100%;
        height: 400px;
    }
</style>
